<template>
	<div class="edit">
		<!-- 新建按钮 -->
		<Button type="primary" @click="add" style="margin: 0 0 20px;">新建需求</Button>
		<!-- 表格及分页 -->
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size="pageSize" @on-change="getList" />
			</div>
		</div>
		<!-- 新建面板 -->
		<Modal v-model="creatArticalModal" :title="modalMethod" @on-ok="save" width="800">
			<Form :label-width="80">
				<FormItem label="需求标题">
					<Input v-model="articalObj.demandTitle" placeholder="请输入需求标题"></Input>
				</FormItem>
				<FormItem label="服务类型">
					<Select v-model="articalObj.serverTypeId">
						<Option v-for="item in serverTypeList" :value="item.id" :key="item.id">{{item.serverName}}</Option>
					</Select>
				</FormItem>
				<FormItem label="服务内容">
					<Input v-model="articalObj.content" type="textarea" :rows="3" placeholder="请输入服务内容"></Input>
				</FormItem>
				<FormItem label="预算价格">
					<Row>
						<Col span="12">
						<Select v-model="articalObj.price">
							<Option v-for="item in priceList" :value="item.price" :key="item.id">{{item.price}}</Option>
						</Select>
						</Col>
						<Col span="12">
						<Input v-model="articalObj.price" placeholder="请输入自定义价格"></Input>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="上传附件">
					{{articalObj.taskEnclosure}}
					<Upload :action="uploadUrl" :show-upload-list="false" :on-success="uploadSuc" :headers="headers">
						<Button icon="ios-cloud-upload-outline">选择文件</Button>
					</Upload>
				</FormItem>
				<FormItem label="任务大类">
					<Select v-model="articalObj.serviceId">
						<Option v-for="item in taskTypeList" :value="item.id + ''" :key="item.id">{{item.serviceName}}</Option>
					</Select>
				</FormItem>
				<FormItem label="任务类型">
					<Select v-model="articalObj.taskTypeId">
						<Option v-for="item in classList" :value="item.id" :key="item.id">{{item.taskTypeName}}</Option>
					</Select>
				</FormItem>
				<FormItem label="结束时间">
					<DatePicker type="datetime" :value="articalObj.endTime" placeholder="请输入结束时间" format="yyyy-MM-dd HH:mm:ss" @on-change="getTime"></DatePicker>
				</FormItem>
				<FormItem label="参考网站">
					<Input v-model="articalObj.website" placeholder="请输入参考网站"></Input>
				</FormItem>
				<FormItem label="手机号">
					<Input v-model="articalObj.phoneNumber" placeholder="请输入手机号"></Input>
				</FormItem>
			</Form>
		</Modal>
		<!-- 删除面板 -->
		<Modal v-model="deleteArticalModal" title="删除版块" @on-ok="deleteArtical">
			是否删除该数据?
		</Modal>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		name: 'editor',
		data () {
			return {
				// 表头
				columns: [{
						type: 'index',
						title: '序列',
						width: 100,
						align: 'center'
					},
					{
						title: '需求标题',
						key: 'demandTitle'
					},
					{
						title: '服务类型',
						key: 'serverTypeId',
						render: (h, params) => {
							let temp = params.row.serverTypeId
							if (temp !== '' && temp !== null) {
								let temp1 = this.serverTypeList.find(ele => ele.id === temp)
								if (temp1 !== undefined) {
									temp = temp1.serverName
								}
							}
							return h('div', temp)
						}
					},
					{
						title: '预算价格',
						key: 'price'
					},
					{
						title: '任务大类',
						key: 'serviceId',
						render: (h, params) => {
							let temp = params.row.serviceId
							if (temp !== '' && temp !== null) {
								let temp1 = this.taskTypeList.find(ele => ele.id + '' === temp)
								if (temp1 !== undefined) {
									temp = temp1.serviceName
								}
							}
							return h('div', temp)
						}
					},
					{
						title: '任务类型',
						key: 'task_type_id',
						render: (h, params) => {
							let temp = params.row.taskTypeId
							if (temp !== '' && temp !== null) {
								let temp1 = this.classList.find(ele => ele.id === temp)
								if (temp1 !== undefined) {
									temp = temp1.taskTypeName
								}
							}
							return h('div', temp)
						}
					},
					{
						title: '结束时间',
						key: 'endTime'
					},
					{
						title: '参考网站',
						key: 'website'
					},
					{
						title: '手机号',
						key: 'phoneNumber'
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '5px',
										marginBottom: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row)
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '5px',
										marginBottom: '5px'
									},
									on: {
										click: () => {
											this.remove(params.row)
										}
									}
								}, '删除')
							])
						}
					}
				],
				// 表格数据
				tableData: [],
				// 当前页
				page: 1,
				// 每页数量
				pageSize: 10,
				// 总数
				count: 0,
				// 新建面板是否展示
				creatArticalModal: false,
				articalObj: {}, // 文章对象
				modalMethod: '', // 方法
				classList: [], // 任务类型
				priceList: [], // 价格列表
				taskTypeList: [], // 任务大类
				serverTypeList: [], // 服务类型
				user: {},
				uploadUrl: sessionStorage.uploadUrl + '/files/upload',
				deleteArticalModal: false,
				deleteId: 0,
				headers: {}
			}
		},
		methods: {
			// 获取文章列表
			getList (page) {
				this.page = page
				this.$api.get(0, '/dem/v2/demandTable/page', {
					page: this.page,
					limit: this.pageSize
				}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.count = r.data.data.total
					}
				})
			},
			add () {
				this.articalObj = {}
				this.modalMethod = '新增'
				this.creatArticalModal = true
			},
			// 修改文章
			edit (row) {
				this.articalObj = {
					demandTitle: row.demandTitle,
					serverTypeId: row.serverTypeId,
					content: row.content,
					price: row.price,
					taskEnclosure: row.taskEnclosure,
					serviceId: row.serviceId,
					taskTypeId: row.taskTypeId,
					endTime: row.endTime,
					website: row.website,
					phoneNumber: row.phoneNumber,
					id: row.id
				}
				this.modalMethod = '修改'
				this.creatArticalModal = true
			},
			// 保存
			save () {
				if (this.modalMethod === '新增') {
					this.articalObj.uid = this.user.id
					this.$api.post(0, '/dem/v2/demandTable', this.articalObj, r => {
						if (r.data.code === 0) {
							this.$Message.success('新增成功')
							this.getList(1)
						} else {
							this.$Message.error('新增失败')
						}
					})
				} else if (this.modalMethod === '修改') {
					this.$api.put(0, '/dem/v2/demandTable', this.articalObj, r => {
						if (r.data.code === 0) {
							this.$Message.success('修改成功')
							this.getList(1)
						} else {
							this.$Message.error('修改失败')
						}
					})
				}
			},
			// 删除文章
			remove (row) {
				this.deleteArticalModal = true
				this.deleteId = row.id
			},
			// 上传
			uploadSuc (response) {
				this.$set(this.articalObj, 'taskEnclosure', response.data)
			},
			getTime (data) {
				this.articalObj.endTime = data
			},
			deleteArtical () {
				this.$api.delete(0, '/dem/v2/demandTable', {
					id: this.deleteId
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('删除成功')
						this.getList(1)
					} else {
						this.$Message.error('删除失败')
					}
				})
			}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			// 价格列表
			this.$api.get(0, '/dem/v2/priceTable/list', {}, r => {
				if (r.data.code === 0) {
					this.priceList = r.data.data
				}
			})
			// 服务类型
			this.$api.get(0, '/dem/v2/serverType/list', {}, r => {
				if (r.data.code === 0) {
					this.serverTypeList = r.data.data
				}
			})
			// 任务大类
			this.$api.get(0, '/dem/v2/serviceClassification/list', {}, r => {
				if (r.data.code === 0) {
					this.taskTypeList = r.data.data
				}
			})
			// 任务类型
			this.$api.get(0, '/dem/v2/taskType/list', {}, r => {
				if (r.data.code === 0) {
					this.classList = r.data.data
				}
			})
			this.headers = {
				'Authorization': Util.getToken()
			}
			this.getList(1)
		}
	}
</script>

<style scope>
	.ivu-upload {
		display: inline-block;
	}

	.editBox {
		margin-bottom: 24px;
	}
</style>
